<template>
  <div class="common-layout">
      <el-header>
        <Headers/>
      </el-header>
      <el-container>
        <el-aside>
          <Aside></Aside>
        </el-aside>
        <el-main>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component"/>
            </keep-alive>
          </router-view>
        </el-main>
      </el-container>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import Headers from "./Header.vue"
import Aside from "./Aside.vue"

const Component = ref("/")
</script>
<style scoped>
a {
  color: #42b983;
}

:deep(.el-header) {
  padding: 0;
  overflow: hidden;
}

:deep(.el-container) {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
}

:deep(.el-aside) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
}

:deep(.el-aside > div) {
  position: relative;
  height: 100%;
}

:deep(.el-aside  .el-menu) {
  height: 100%;
}

:deep(.el-main) {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
}

</style>
